<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>

<button id="select">查询</button>
<input type="text" id="searchInput">
<div class="container">
<table id="pageTable" class="table table-bordered">
    <th>
    <td>快递编号</td>
    <td>寄件人</td>
    <td>收件人</td>
    <td>状态</td>
    <td>操作</td>
    <td>取件二维码</td>
    </th>
</table>
    <nav style="text-align: right">
        <ul class="pagination" style="margin: 0 auto;">
        </ul>
    </nav>
</div>
<!--订单详情 模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">订单详情</h4>
            </div>
            <div class="modal-body">
                <div class="el-dialog__body">
                    <div class="info-box">
                        <div class="bar" style="text-align: center">
                            <p id="pageNum"></p>
                            <p id="status"></p>
                        </div>
                        <table cellpadding="0" cellspacing="1" class="table table-bordered">
                            <tr>
                                <td>寄件</td>
                                <td><h3 id="sNameAndPhone"></h3>
                                    <p id="sAddressAndDetailAddress"></p></td>
                            </tr>
                            <tr>
                                <td>收件</td>
                                <td><h3 id="rNameAndPhone"></h3>
                                    <p id="rAddressAndDetailAddress"></p></td>
                            </tr>
                            <tr>
                                <td>其他</td>
                                <td><p><i>下单时间：</i> <em id="createTime"></em></p></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div id="qrcode" style="width:500px; height:500px;  margin: 100px auto"></div>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
    /**
     * 丛志文
     */

    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width : 500,
        height : 500
    });

    $.ajax({
        url: "/sdkd/userPageInfo/selectAllPageInfo.do",
        async: false,
        dataType: "json",
        type: "post",
        success: function (data) {
            let html = ''
            console.log(data)
            var list = data.data
            if(null == list){
                console.log("没有数据")
                return
            }
            for (let i = 0; i < list.length; i++) {
                let status = list[i].status
                let pageNum = list[i].pageNum
                let pageCode = list[i].pageCode
                html += `<tr class="list"><td>${i + 1}</td>
                <td>${list[i].pageNum}</td>
                <td>${list[i].sendName}</td>
                <td>${list[i].receiveName}</td>
                <td class="status" id=${status}>${list[i].status}</td>
                <td><input type="button" class="sendDetail" id=${pageNum} data-target="#myModal" data-toggle="modal" value="订单详情"></td>
                <td><a id=${pageCode} class="pageCode" data-target="#myModal1" data-toggle="modal">显示取件二维码</a></td></tr>`
            }
            $("#pageTable").append(html)
        }
    })

    // 快递详情
    $("body").on("click", ".sendDetail", function () {
        let pageNum = $(this).attr("id")
        console.log(pageNum)
        $.post("/sdkd/userPageInfo/userDetailPageInfo.do", "pageNum=" + pageNum, function (data) {
            console.log(data)

            $("#pageNum").text("快递编号: " + data.data.pageNum)
            $("#status").text("最新状态: " + data.data.status)
            $("#sNameAndPhone").text(data.data.sendName + " " + data.data.sendPhone)
            $("#sAddressAndDetailAddress").text(data.data.sendProvince + data.data.sendCity + data.data.sendArea + " " + data.data.sendDetail)
            $("#rNameAndPhone").text(data.data.receiveName + " " + data.data.receivePhone)
            $("#rAddressAndDetailAddress").text(data.data.receiveProvince + data.data.receiveCity + data.data.receiveArea + " " + data.data.receiveDetail)
            $("#createTime").text(data.data.createTime)
        }, "json")
    })

        //点击显示取件二维码
    $("body").on("click",".pageCode",function () {
            let elText = $(this).attr("id")
            qrcode.makeCode(elText);
    })

        //根据输入框内容 查询
        $("#select").click(function () {
            let searchValue = $("#searchInput").val()
            $.post("/sdkd/userPageInfo/selectByConditions.do", "searchValue=" + searchValue, function (data) {
                $(".list").remove()
                let list = data.data
                if (null == list) {
                    console.log("没有数据")
                    return
                }
                let html = ''
                console.log(data)
                for (let i = 0; i < list.length; i++) {
                    let status = list[i].status
                    let pageNum = list[i].pageNum
                    let pageCode = list[i].pageCode
                    html += `<tr class="list"><td>${i + 1}</td>
                <td>${list[i].pageNum}</td>
                <td>${list[i].sendName}</td>
                <td>${list[i].receiveName}</td>
                <td class="status" id=${status}>${list[i].status}</td>
                <td><input type="button" class="sendDetail" id=${pageNum} data-target="#myModal" data-toggle="modal" value="订单详情"></td>
                <td><a id=${pageCode} class="pageCode" data-target="#myModal1" data-toggle="modal">显示取件二维码</a></td></tr>`
                }
                $("#pageTable").append(html)
            }, "json")
        })
</script>
</body>
</html>